<!doctype html>
<html lang="en">
<head>
    <title>广州市老旧小区微改造规划设计方案竞赛</title>
    <link rel="import" href="/src/page/head.html?__inline">
    <script src="/src/js/news.js"></script>
    <style>
        .floadAd { position: absolute;z-index: 999900; display: none; }
        .floadAd .item { display: block; }
        .floadAd .item img { vertical-align: bottom; }/* a img 的组合浏览器默认下边会有几个像素的空白，这里可以消除空白*/
    </style>
</head>
<body>
<!--漂浮广告-->
<div id="floadAD" class="floadAd">
    <a class="item" href="works.html">
        <img src="/src/img/toworks.png"/>
    </a>
</div>

<!--头部导航-->
<link rel="import" href="/src/page/nav.html?__inline">

<!--内容-->
<div class="home">
    <div class="img-show"></div>
    <div class="row bg-blue">
        <div class="introduct content">
            <h2><img src="/src/img/home-tit-1.png" alt=""></h2>
            <div class="cont">
                <div class="left">
                    老旧小区微改造是广州市城市更新改造的重要内容之一。<br>
                    为加快推进我市老旧小区微改造的建设工作，提升老旧小区微改造品质，从设计源头确保老旧小区微改造的高标准和高质量，扩大公众参与，吸引规划师、建筑师、艺术家、市民群众等群体深度参与，高起点、高水平、高标准规划设计符合我市旧城区发展需要的广州文化精品老旧小区，特选取5个老旧小区项目开展广州市老旧小区微改造规划设计方案竞赛活动，以激发微改造活力，实现社会公平，发掘和保留社区地方特色、改善社区邻里关系、提升社区环境、复兴社区文化、造福社区居民为宗旨，共同创造广州优质的城市生活。<br>
                    本次竞赛成立广州市老旧小区微改造规划设计方案竞赛工作领导小组（简称“竞赛工作领导小组”），负责组织协调、指导、监督检查和纠纷调处等工作，对竞赛工作中的重大事项行使决策权，下设领导小组办公室、评审专家组和项目属地区地方工作小组  ...
                    <a href="introduct.html">查看详细>></a>
                </div>
                <div class="right"><img src="/src/img/home-tit1-img.png" alt=""></div>
            </div>
            <a class="btn" href="rule.html">查看大赛规则>></a>
        </div>
    </div>

    <div class="row time">
        <div class="content">
            <h2><img src="/src/img/home-tit-2.png" alt=""></h2>
            <ul>
                <li>
                    <div class="dt">报名时间</div>
                    <div class="dd">2017年6月20日～2017年7月5日</div>
                </li>
                <li>
                    <div class="dt">竞赛起止</div>
                    <div class="dd">2017年7月6日～2017年8月20日</div>
                </li>
                <li>
                    <div class="dt">评审阶段</div>
                    <div class="dd">2017年8月21日～2017年8月31日</div>
                </li>
                <li>
                    <div class="dt">通报结果</div>
                    <div class="dd">2017年9月1日</div>
                </li>
                <li>
                    <div class="dt">评奖阶段</div>
                    <div class="dd">2017年9月1日～2017年9月7日</div>
                </li>
                <li>
                    <div class="dt">颁奖阶段</div>
                    <div class="dd">2017年9月20日</div>
                </li>
            </ul>
            <div class="explain">备注：具体以组织单位公布为准</div>
        </div>
    </div>

    <div class="row prize bg-blue">
        <div class="content">
            <h2><img src="/src/img/home-tit-3.png" alt=""></h2>
            <div class="explain">报名成功的参赛单位（个人/团体）按竞赛技术材料要求报送竞赛成果文件,并经评审评为优秀方案的可按获奖名次获得奖励（5个项目分别设置奖项）。</div>
            <ul>
                <li>
                    <div class="dt">一等奖</div>
                    <div class="dd">奖金30000元<br> + 获奖证书</div>
                </li>
                <li>
                    <div class="dt">二等奖</div>
                    <div class="dd">奖金20000元<br> + 获奖证书</div>
                </li>
                <li>
                    <div class="dt">三等奖</div>
                    <div class="dd">奖金10000元<br> + 获奖证书</div>
                </li>
                <li>
                    <div class="dt">佳作奖</div>
                    <div class="dd">奖金5000元<br> + 获奖证书</div>
                </li>
            </ul>
        </div>
    </div>

    <div class="row dynamic" id="news">
        <div class="content">
            <h2><img src="/src/img/home-tit-4.png" alt=""></h2>
            <div class="cont">
                <a class="img" target="_blank" v-bind:style="{ 'background-image' : 'url('+lists[0].cover+')' }" :href="lists[0].outlink_url">
                    <i v-html="lists[0].title"></i>
                </a>
                <ul>
                    <li v-for="item in indexlists">
                        <a class="pic" target="_blank" v-bind:href="item.outlink_url" v-bind:style="{ 'background-image' : 'url('+item.cover+')' }"></a>
                        <a class="dt" target="_blank" v-bind:href="item.outlink_url" v-html="item.title"></a>
                        <div class="dd" v-html="item.summary"></div>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <div class="row works">
        <div class="content">
            <h2><img src="/src/img/home-tit-5.png" alt=""></h2>
            <div class="lists">
                <a href="works.html?index=0">
                    <div class="img" style="background-image: url('/src/img/works-1.jpg')"></div>
                    <div class="txt">越秀区梅花村街梅花路小区（3-21号大院）微改造</div>
                </a>
                <a href="works.html?index=1">
                    <div class="img odd" style="background-image: url('/src/img/works-2.jpg')"></div>
                    <div class="txt">海珠区龙凤街仁和社区（含历史建筑）微改造</div>
                </a>
                <a href="works.html?index=2">
                    <div class="img" style="background-image: url('/src/img/works-3.jpg')"></div>
                    <div class="txt">荔湾区金花街陈家祠社区（含历史建筑）微改造</div>
                </a>
                <a href="works.html?index=3">
                    <div class="img odd" style="background-image: url('/src/img/works-4.jpg')"></div>
                    <div class="txt">白云区三元里街交电新村老旧小区微改造</div>
                </a>
                <a href="works.html?index=4">
                    <div class="img" style="background-image: url('/src/img/works-5.jpg')"></div>
                    <div class="txt">黄埔区黄埔街怡园小区微改造</div>
                </a>
            </div>
        </div>
    </div>
</div>

<!--底部-->
<link rel="import" href="/src/page/footer.html?__inline">
<script>
    FloatAd("#floadAD");//调用

    //广告漂浮窗口
    function FloatAd(selector) {
        var obj = $(selector);
        if (obj.find(".item").length == 0) return;//如果没有内容，不执行
        var windowHeight = $(window).height();//浏览器高度
        var windowWidth = $(window).width();//浏览器宽度
        var dirX = -1.5;//每次水平漂浮方向及距离(单位：px)，正数向右，负数向左，如果越大的话就会看起来越不流畅，但在某些需求下你可能会需要这种效果
        var dirY = -1;//每次垂直漂浮方向及距离(单位：px)，正数向下，负数向上，如果越大的话就会看起来越不流畅，但在某些需求下你可能会需要这种效果

        var delay = 30;//定期执行的时间间隔，单位毫秒
        obj.css({ left: windowWidth / 2 - obj.width() / 2 + "px", top: windowHeight / 2 - obj.height() / 2 + "px" });//把元素设置成在页面中间
        obj.show();//元素默认是隐藏的，避免上一句代码改变位置视觉突兀，改变位置后再显示出来
        var handler = setInterval(move, delay);//定期执行，返回一个值，这个值可以用来取消定期执行

        obj.hover(function() {//鼠标经过时暂停，离开时继续
            clearInterval(handler);//取消定期执行
        }, function() {
            handler = setInterval(move, delay);
        });

        $(window).resize(function() {//当改变窗口大小时，重新获取浏览器大小，以保证不会过界（飘出浏览器可视范围）或漂的范围小于新的大小
            windowHeight = $(window).height();//浏览器高度
            windowWidth = $(window).width();//浏览器宽度
        });
        function move() {//定期执行的函数，使元素移动
            var currentPos = obj.position();//获取当前位置，这是JQuery的函数，具体见：http://hemin.cn/jq/position.html
            var nextPosX = currentPos.left + dirX;//下一个水平位置
            var nextPosY = currentPos.top + dirY;//下一个垂直位置

            if (nextPosX <= 0 || nextPosX >= windowWidth - obj.width()) {//如果达到左边，或者达到右边，则改变为相反方向
                dirX = dirX * -1;//改变方向
                nextPosX = currentPos.left + dirX;//为了不过界，重新获取下一个位置
            }
            if (nextPosY <= 0 || nextPosY >= windowHeight - obj.height() - 5) {//如果达到上边，或者达到下边，则改变为相反方向。
                dirY = dirY * -1;//改变方向
                nextPosY = currentPos.top + dirY;//为了不过界，重新获取下一个位置
            }
            obj.css({ left: nextPosX + "px", top: nextPosY + "px" });//移动到下一个位置
        }

        function close() {//停止漂浮，并销毁漂浮窗口
            clearInterval(handler);
            obj.remove();
        }
    }
</script>
</body>
</html>